<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/base_user.css">
    <script src="__STATIC__/js/jquery-1.8.2.js"></script>
    <script src="__STATIC__/js/swiper.min.js"></script>
    <title>商品详情</title>
    <script src="__STATIC__/js/layer_mobile/layer.js"></script>
    <style>
        .tw img {
            width: 100% !important;
        }

    </style>
    <script>
        $(function () {
            $(".tablist li").click(
                    function () {
                        var a = $(".tablist li").index(this);
                        $(this).addClass("cur");
                        $(this).siblings().removeClass("cur");
                        $(".tabcon>div").eq(a).css({display: "block"});
                        $(".tabcon>div").eq(a).siblings().css({display: "none"});
                    }
            )
            $(".size li").click(
                    function () {
                        $(this).addClass("cur");
                        $(this).addClass("selected_attr");
                        $(this).siblings().removeClass("cur");
                        $(this).siblings().removeClass("selected_attr");
                        text_change();
                    }
            )
            function text_change() {
                //改变值
                var text = '';

                $('.selected_attr').each(function (i, o) {
                    text += $(o).text() + ',';
                });
                var new_text = text.substr(0, text.length - 1);
                $('#text_selected').text(new_text);

                ajax_new(new_text);
            }

            //ajax调用新价格
            function ajax_new(text) {
                var goods_id = $('#goods_id').val();
                $.post('new_attr', {'text': text, 'goods_id': goods_id}, function (t) {
                    if (t.id == 0) {
                        layer.open({content: t.message, skin: 'msg', time: 2});
                    } else {
                        $('#selected_price').text(t.price);
                        $('#goods_attr_id').val(t.id)
                    }
                })
            }

            $(function () {
                text_change();
                $(window).scroll(function () {
                    if ($(window).scrollTop() >= 50) {
                        $('.top').fadeIn(300);
                    } else {
                        $('.top').fadeOut(300);
                    }
                });
                $('.top').click(function () {
                    $('html,body').animate({scrollTop: '0px'}, 800);
                });
                $(".footer .list2 li").click(
                        function () {
                            var h = $(document.body).height();
                            $(".board").height(h + "px");
                            $(".spsx").css({display: "block"});
                        }
                )
                $(".spsx .cancel").click(
                        function () {
                            $(".board").height("");
                            $(".spsx").css({display: ""});
                        }
                )
            });
        })
        //选择属性分类
        function selectAttr() {
            var h = $(document.body).height();
            $(".board").height(h + "px");
            $(".spsx").css({display: "block"});
        }
    </script>

</head>
<body>
<div class="wrap-det">
    <input type="hidden" id="goods_id" value="{:input('goods_id')}"/>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            {volist name='info.picArr' id='item'}
            <div class="swiper-slide"><img src="/{$item}"></div>
            {/volist}
        </div>
        <div class="swiper-pagination"></div>
        <img src="__STATIC__/img_user/sp-fanhui.png" class="img1" onclick=window.location.href="{:url($back)}">
        <img src="__STATIC__/img_user/sp-gouwuche.png" class="img2"
             onclick=window.location.href="{:url('mobile/user_cart/cart_index')}">
        <img src="__STATIC__/img_user/sp-qita.png" class="img3">
        <div class="menu">
            <table border="0">
                <tr>
                    <td><img src="__STATIC__/img/sp-shouye.png"></td>
                    <td><a href="{:url('mobile/user_port/index')}">首页</a></td>
                </tr>

                <tr><a href="#">
                    <td><img src="__STATIC__/img_user/sp-fenxiang.png"></td>
                    <td>分享</td>
                </a>
                </tr>
            </table>
        </div>
    </div>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: 2500,
            autoplayDisableOnInteraction: false
        });
        $(function () {
            $(".img3").click(
                    function () {
                        $(".menu").toggle();
                    }
            )
        })
    </script>

    <div class="center">
        <h3><a href="#">{$info.title}</a></h3>
        <p class="price"><span>&yen; {$info['limit_price']}</span><span>周周币 </span><p><s>{$info.price}</s></p> <img
                src="__STATIC__/img_user/sy-qianbi.png"><font style="line-height: 48px;margin-left: 5px;" class="scale">{$info.rebate_percentage}%</font>
        </p>
        <p>快递：{eq name='info.freight_type' value='1'}{$info.freight}元{else/}免运费{/eq} 销量：{$info.sale_number}笔</p>
    </div>
    <div class="type">
        <ul>
            <li class="last">
                <a href="#">领取优惠券
                    <img src="__STATIC__/img_user/next1.png" class="next"
                         onclick=window.location.href="{:url('mobile/user_category/get_ticket')}?shop_id={$info.member_id}&goods_id={$info.id}"></a>
            </li>
            <li>
                <a href="#">
                    选择属性分类
                    <img src="__STATIC__/img_user/next1.png" class="next" onclick="selectAttr()"></a>
            </li>

        </ul>
    </div>
    <div class="sppj">
        <p><a href="#">商品评价({$info.evaluate})<img src="__STATIC__/img_user/next1.png" class="next"
                                                  onclick=window.location.href="{:url('mobile/user_category/goods_evaluate')}?goods_id={$info.id}"></a>
        </p>
        {if condition="$info.evaluate_info"}
        <div class="review">
            <div class="title">
                <img src="/{$info.evaluate_info.member.avatar}">
                <p>{$info.evaluate_info.member.nickname}</p>
                <div class="star">
                    {for start='0' end="$info.evaluate_info.grade"}
                    <img src="__STATIC__/img_user/star.png">
                    {/for}
                </div>
            </div>
            <p>{$info.evaluate_info.content}</p>
            <div class="reply">
                <span>2015-12-12 属性规格: {$info.evaluate_info.attr}</span>
            </div>
        </div>
        {/if}
        <ul>
            <li>
                <div>
                    <a href="{:url('mobile/user_category/goods_evaluate')}?goods_id={$info.id}&img=1"><span>有图评价 </span><img
                            src="__STATIC__/img_user/next3.png"></a></div>
            </li>
            <li>
                <div>
                    <a href="{:url('mobile/user_category/goods_evaluate')}?goods_id={$info.id}"><span>更多评价 </span><img
                            src="__STATIC__/img_user/next4.png"></a></div>
            </li>
        </ul>
    </div>
    <div class="store">
        <div class="info">
            <img src="/{$info.shop.logo}" style="border-radius: 50%">
            <h4><a>- {$info.shop.title} - </a></h4>
            <p><a>{$info.shop.description}</a></p>
        </div>
        <ul>
            <li><a href="{:url('mobile/user_category/shop_index')}?shop_id={$info.member_id}&goods_id={$info.id}">进入店铺</a>
            </li>
            <li><a href="{:url('mobile/user_category/shop_goods_cate')}?shop_id={$info.member_id}">查看分类</a></li>
        </ul>
    </div>
    {if condition="$info.combo"}
    <div class="yhtc">
        <p><a href="{:url('mobile/user_category/combo_list')}?combo_id={$info.combo.id}">优惠套餐<img
                src="__STATIC__/img_user/next1.png" class="next"></a></p>
        <ul>
            {volist name='info.combo.shopGoodsComboSelected' id='v'}
            <li class="pic">
                <a href="{:url('mobile/user_category/goods_details')}?goods_id={$v.goods_id}"><img
                        src="/{$v.shopGoods.thumb_img}">
                    <h4>{$v.shopGoods.title}</h4>
                    <p>{$v.shopSpecAttr.price}</p></a>
            </li>
            <li class="and">
                <a><img src="__STATIC__/img_user/and.png"></a>
            </li>
            {/volist}
        </ul>
    </div>
    {/if}
    <div class="continue">
        <p>
            <span class="cir"></span>
            <span> 继续拖动，查看图文详情 </span>
            <span class="cir"></span>
        </p>
    </div>
    <div class="tab">
        <div class="tablist">
            <ul>
                <li class="cur"><a href="javascript:change(1);"><span>图文详情</span></a></li>
                <li><a href="javascript:change(2);"><span>规格参数</span></a></li>
                <li><a href="javascript:change(3);"><span>店铺推荐</span></a></li>
            </ul>
        </div>
        <div class="tabcon">
            <div class="tw cur">
                {$info.content}
            </div>
            <div>
                <ul class="list">
                    <li>
                        <a href="#">
                            <div class="goods">
                                <img src="__STATIC__/img_user/pic21.png">
                                <p>销量 123</p>
                            </div>
                            <h4>纯手工天然染色不掉色三层 沙滩长裙沙滩长裙沙滩</h4>
                            <div class="price">￥350.00</div>
                            <div class="qianbi">
                                <span>周周币</span><img src="__STATIC__/img_user/sy-qianbi.png"><img
                                    src="__STATIC__/img_user/sy-baifenbi.png">
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div>
                <ul class="list">
                    {volist name="shop_goods" id='v'}
                    <li>
                        <a href="{:url('mobile/user_category/goods_details')}?goods_id={$v.id}">
                            <div class="goods">
                                <img src="/{$v.thumb_img}">
                                <p>销量 {$v.sale_number}</p>
                            </div>
                            <h4>{$v.title}</h4>
                            <div class="price">&yen;{$v.price}</div>
                            <div class="qianbi">
                                <span>周周币</span><img src="__STATIC__/img_user/sy-qianbi.png"><font class="scale">{$v.rebate_percentage}%</font>
                            </div>
                        </a>
                    </li>
                    {/volist}
                </ul>
            </div>
        </div>
    </div>

    <img src="__STATIC__/img_user/top2.png" class="top">
    <div class="footer">
        <ul class="list1">
            <li><a href="#"><img src="__STATIC__/img_user/sp-kefu.png"><br><span>客服</span></a></li>
            <li>
                <a href="{:url('mobile/user_category/shop_index')}?shop_id={$info.member_id}&goods_id={$info.id}"><img
                        src="__STATIC__/img_user/sp-shangdian.png"><br><span>店铺</span></a></li>
            <li><a href="javascript:collect({$info.id});"><img
                    src="__STATIC__/img_user/sp-shoucang.png"><br><span>收藏</span></a></li>
        </ul>
        <ul class="list2">
            <li><a href="#">立即抢购</a></li>
        </ul>

    </div>
    <div class="board"></div>
    <div class="spsx">
        <div class="sp">
            <a href="#"><img src="/{$info.picUrl}"></a>
            <div>
                <h4><a href="#">{$info.title} </a></h4>
                <input type="hidden" name="goods_attr_id" id="goods_attr_id" value=""/>
                <p>已选 <font id="text_selected"></font><span>&yen;<font id="selected_price">{$info['limit_price']}</font></span>
                </p>
                <input type="hidden" id="default_price" value="{$info['limit_price']}"/>
            </div>
        </div>
        {volist name='info.goods_attr' id='v' empty="<p>此商品无属性</p>"}
        <div class="size">
            <h4>{$key}</h4>
            <ul>
                {volist name='v' id='vv' }
                <li {eq name="i" value="1" } class="first cur selected_attr" {else/} class="first" {/eq} onclick="set_attr({$key})"><a href="javascript:;">{$vv}</a></li>
                {/volist}
            </ul>
        </div>
        {/volist}

        <div class="footer1">
            <ul class="list2">
                <li><a href="#">立即抢购</a></li>
            </ul>
        </div>
        <img src="__STATIC__/img_user/cancel.png" class="cancel">
    </div>
</div>
<script>
    $(function () {
        //删除套餐多余的加号
        $('.and:last').remove();
    });

    //收藏商品
    function collect(id) {
        $.ajax({
            url: "goods_collect",
            type: 'post',
            dataType: 'json',
            data: {'type': 1, 'id': id},
            success: function (t) {
                if (t.code == 200) {
                    layer.open({content: t.message, skin: 'msg', time: 2});
                } else {
                    layer.open({content: t.message, skin: 'msg', time: 2});
                }
            },
            error: function () {
                layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
            }
        })
    }
    
    //立即抢购
    function set_attr(id) {
        alert(id);
    }
</script>
</body>
</html>